<template>
	<view class="container">
		<uni-card :is-shadow="false" is-full>
			<view v-for="(button, index) in buttons" :key="index" class="button-container" @click="goToPage(index)">
				<text>{{ button.title }}</text>
				<text class="lifecycle-data">{{ lifecycleData }}</text>
				<text>{{ button.status }}</text>
			</view>
		</uni-card>
	</view>
</template>

<script>
	import Vue from 'vue';
export default {
  data() {
    return {
      buttons: [
        { title: '准备情况', status: '' },
        { title: '要点登记确认', status: '' },
        { title: '销点确认', status: '' },
        { title: '完工情况', status: '' },
		{ title: '晚登记说明', status: '' },
		{ title: '晚销点说明', status: '' },
		{ title: '盯岗人员现场记录', status: '' },
		{ title: '阶段性工作完成', status: '' }
      ],
      lifecycleData: '',
	  lifecycleStatus: [],
    };
  },
  created() {
    this.fetchDataFromBackend(); 
	this.resetButtonStatus();
	if (this.$route.query.update0 === 'true') {
	      this.updateButtonStatus(0);
	    }
	if (this.$route.query.update1 === 'true') {
	      this.updateButtonStatus(1);
	    }
	if (this.$route.query.update2 === 'true') {
	      this.updateButtonStatus(2);
	    }
	if (this.$route.query.update3 === 'true') {
	      this.updateButtonStatus(3);
	    }
	if (this.$route.query.update4 === 'true') {
	      this.updateButtonStatus(4);
	    }
	if (this.$route.query.update5 === 'true') {
	      this.updateButtonStatus(5);
	    }
	if (this.$route.query.update6 === 'true') {
	      this.updateButtonStatus(6);
	    }
	if (this.$route.query.update7 === 'true') {
	      this.updateButtonStatus(7);
	    }
  },
  methods: {
	  resetButtonStatus() {
	      this.buttons.forEach((button, index) => {
	          button.status = this.lifecycleStatus[index]||'未完成' ;
			  
	      });
	  },
	      fetchDataFromBackend() {
	        // 发起请求来获取后端数据并更新按钮状态以及生命周期数据
	        // 示例中假设从后端获取到了生命周期数据并将其赋值给lifecycleData
	        this.lifecycleData = 'created生命周期';
	      },
	      updateButtonStatus(index) {
	          
	              this.lifecycleStatus[index] = '已完成';
	              this.buttons[index].status = this.lifecycleStatus[index];
	              // this.saveLifecycleStatus(); // 保存更新后的状态到 localStorage
				  
	      },
    goToPage(index) {
      const pages = ['/pages/prepare/prepare', '/pages/PointRegistration/PointRegistration', '/pages/CancelPoint/CancelPoint', '/pages/Completion/Completion','/pages/LaterPoint/LaterPoint','/pages/LaterUnPoint/LaterUnPoint','/pages/SiteReviewRecord/SiteReviewRecord','/pages/phasedimplementation/phasedimplementation'];
      uni.navigateTo({
        url: pages[index]
      });
    },
	// saveLifecycleStatus() {
	//     localStorage.setItem('lifecycleStatus', JSON.stringify(this.lifecycleStatus));
	// },
	
	// restoreLifecycleStatus() {
	//     const savedStatus = localStorage.getItem('lifecycleStatus');
	//     if (savedStatus) {
	//         this.lifecycleStatus = JSON.parse(savedStatus);
	//     }
	// },
  }
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center; /* 将按钮容器水平居中 */
}

.button-container {
  display: flex;
  justify-content: space-between; /* 按钮和文本水平排布 */
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 5px;
  cursor: pointer; /* 鼠标样式为手型 */
  width: 100%; /* 让按钮容器占满整行 */
}

.lifecycle-data {
  align-self: flex-end;
  font-size: 14px;
  color: #7f8c8d; /* 文本颜色 */
}

.completed {
  background-color: #3CB371; /* 绿色 */
}

.pending {
  background-color: #FF69B4; /* 粉色 */
}

.not-started {
  background-color: #A9A9A9; /* 灰色 */
}
</style>